<template>
    <Teleport to="body">
        <transition name="el-fade-in">
            <div class="material-store-preview-dialog" :class="{ 'is-preview-3d': !!data.pack_after_url }" v-if="visible">
                <div class="material-store-preview-dialog__mask" @click="onClose"></div>

                <div class="material-store-preview-dialog__content">
                    <img class="icon-close" :src="`${_oss_}images/material-store/icon-close.png`" @click="onClose()" />

                    <div class="swiper-box">
                        <iframe :src="`https://3d-preview.vrnewg.com?url=${data.pack_after_url}`"
                            v-if="data.pack_after_url">
                        </iframe>
                        <template v-else>
                            <Swiper @swiper="(ref) => (swiperRef = ref)" :modules="[Autoplay, Pagination]"
                                :pagination="{ clickable: true }">
                                <SwiperSlide v-for="item in data.preview_files" :key="item">
                                    <img class="img" :src="item +
                                        '?x-oss-process=image/watermark,image_' +
                                        toBase64(
                                            'water/logo_white.png?x-oss-process=image/resize,P_30'
                                        ) +
                                        ',g_center,t_60'
                                        " />
                                </SwiperSlide>
                            </Swiper>

                            <img class="button-prev" @click="onPrev"
                                :src="`${_oss_}images/material-store/arrow-left-btn.png`" />

                            <img class="button-next" @click="onNext"
                                :src="`${_oss_}images/material-store/arrow-right-btn.png`" />
                        </template>
                    </div>

                    <div class="info-box">
                        <div class="top">
                            <div class="title">{{ data.name }}</div>

                            <template v-if="data.sale_model != 1">
                                <div class="price" v-if="data.price">
                                    价格：￥{{ data.price }}
                                </div>

                                <div class="price" v-if="data.integral">
                                    积分兑换：{{ data.integral }}
                                </div>
                            </template>

                            <div class="buy-btn" :class="{
                                buying: data.is_buy,
                            }" @click="onBuy">
                                <!-- <img
                                    :src="`${_oss_}images/material-store/icon-cart.png`"
                                /> -->

                                {{ data.is_buy ? "已购买" : "购买/兑换" }}
                            </div>

                            <img class="cart-btn" :src="`${_oss_}images/material-store/${data.is_cart ? 'icon-cart-3' : 'icon-cart-2'
                                }.png`" @click="onAddCart" />
                            <!-- <img
                                class="star-btn"
                                :src="`${_oss_}images/material-store/icon-star-2.png`"
                            /> -->
                        </div>

                        <div class="bottom">
                            <div class="publisher">发布人：华锐云空间</div>

                            <div class="copyright" @click="dialogStore.isReleaseNoteDialog = true">
                                版权说明
                                <img class="icon-question-mark"
                                    :src="`${_oss_}images/material-store/icon-question-mark.png`" />
                            </div>

                            <div class="disclaimer" @click="
                                dialogStore.isBuyTemplateProtocolDialog = true
                                ">
                                免责说明
                                <img class="icon-question-mark"
                                    :src="`${_oss_}images/material-store/icon-question-mark.png`" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </Teleport>

    <DialogMaterialStorePayServiceP ref="payServiceRef" @success="onPaySuccess" />
    <DialogMaterialStoreCartSuccessP ref="cartSuccessRef" />
</template>
<script setup>
import { AddCart, StoreFreeExChange, GetMaterialDetail } from "~/api";
import { Autoplay, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/pagination";

const userStore = useUserStore();
const dialogStore = useDialogStore();
const visible = ref(false);
const swiperRef = ref(null);
const data = ref({});
const id = ref("");
const payServiceRef = ref(null);
const cartSuccessRef = ref(null);

const onPrev = () => {
    swiperRef.value.slidePrev();
};

const onNext = () => {
    swiperRef.value.slideNext();
};

const onClose = () => {
    visible.value = false;
    data.value = {};
    id.value = "";

};

const onAddCart = async () => {
    if (userStore.isLogin) {
        if (data.value.is_cart) return false;

        const res = await AddCart({
            store_id: data.value.id,
        });

        if (res.code == 200) {
            data.value.is_cart = true;
            cartSuccessRef.value.show();
        } else {
            Message().warning(res.msg);
        }
    } else {
        LoginModal();
    }
};

const onPaySuccess = () => {
    GetDetail();
};

const onBuy = async () => {
    if (data.value.is_buy) return false;

    if (userStore.isLogin) {
        if (data.value.sale_model == 1) {
            const res = await StoreFreeExChange({
                store_id: data.value.id,
            });

            if (res.code == 200) {
                Message().success("购买成功!");
                onPaySuccess();
            } else {
                Message().warning(res.msg);
            }
        } else {
            payServiceRef.value.show(data.value.id, data.value.integral > 0);
        }
    } else {
        LoginModal();
    }
};

const GetDetail = async () => {
    const res = await GetMaterialDetail({
        id: id.value,
    });
    if (res.code == 200) {
        data.value = res.data;
    }
};

defineExpose({
    async show(item) {
        id.value = item.id;
        await GetDetail();
        visible.value = true;
    },
});
</script>
<style lang="scss" scoped>
.material-store-preview-dialog {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;

    &.is-preview-3d {
        .swiper-box {
            width: 1000px;

            iframe {
                width: 100%;
                height: 100%;
                border: none;
                overflow: hidden;
            }
        }
    }

    &__mask {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.5);
    }

    &__content {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 1050px;
        height: 568px;
        background: #ffffff;
        border-radius: 10px;
        padding-top: 40px;

        .icon-close {
            position: absolute;
            right: 10px;
            top: 10px;
            width: 28px;
            height: 28px;
            cursor: pointer;
        }

        .swiper-box {
            position: relative;
            width: 800px;
            height: 440px;
            margin: 0 auto;

            .swiper {
                width: 100%;
                height: 100%;
            }

            .img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .button-prev,
            .button-next {
                position: absolute;
                top: 50%;
                width: 50px;
                height: 50px;
                cursor: pointer;
                transform: translateY(-50%);
            }

            .button-prev {
                left: -85px;
            }

            .button-next {
                right: -85px;
            }
        }

        .info-box {
            width: 954px;
            margin: 0 auto;

            .top {
                display: flex;
                align-items: center;
                height: 30px;
                margin-top: 12px;

                .title {
                    font-size: 18px;
                    color: #333;
                    line-height: 1em;
                }

                .price {
                    font-size: 14px;
                    color: #5085fb;
                    margin-left: 42px;
                }

                .buy-btn {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 110px;
                    height: 30px;
                    background: #5085fb;
                    border-radius: 4px;
                    border: 1px solid #5085fb;
                    margin-left: auto;

                    font-size: 14px;
                    color: #ffffff;
                    line-height: 30px;
                    cursor: pointer;

                    img {
                        width: 16px;
                        height: 16px;
                        margin-right: 10px;
                    }

                    &.buying {
                        filter: grayscale(1);
                        cursor: default;
                    }
                }

                .cart-btn,
                .star-btn {
                    width: 30px;
                    height: 30px;
                    cursor: pointer;
                }

                .cart-btn {
                    margin-left: 31px;
                }

                .star-btn {
                    margin-left: 10px;
                }
            }

            .bottom {
                display: flex;
                align-items: center;
                margin-top: 10px;

                .publisher {
                    font-size: 18px;
                    color: #333;
                    line-height: 1em;
                }

                .copyright,
                .disclaimer {
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    color: #999;
                    cursor: pointer;
                }

                .copyright {
                    margin-left: auto;
                }

                .disclaimer {
                    margin-left: 19px;
                }

                .icon-question-mark {
                    width: 14px;
                    height: 14px;
                    margin-left: 6px;
                }
            }
        }
    }
}
</style>
